<script setup lang="ts">
import { onMounted } from 'vue';
import useElementPlusStore from '@/stores/UseElementPlusStore';

onMounted(() => {

  useElementPlusStore().closeLoad();
})

</script>

<template>
  <div class="shell">
    <div class="image"></div>
    <div class="heading">
      <h1>Hello! My name is POSTIVE!</h1>
    </div>
    <div class="text">
      <h1>
        <p>I believe you have already noticed that the spelling of "positive" is incorrect.</p>
        <p>Even though, I don't want to fix it.</p>
      </h1>
    </div>
    <div class="image"></div>
    <div class="heading">
    </div>
    <div class="text">
      <h1>
        <p>Maybe you feel weird!</p>
        <p>Why would this author use an adjective as his own English name?</p>
        <p>Honestly!This is a problem left over by history!!</p>
      </h1>
    </div>
    <div class="image"></div>
    <div class="heading">
      <h1>I am a Software Developer!</h1>
    </div>
    <div class="text">
      <h1>
        <p>Backend Skills</p>
        <p>NetFramework、NetCore、Python、Mysql、SqlServer、RabbitMq、Redis、EF、Dapper...</p>
        <p>Wpf、Prism、Modbus...</p>
        <p>Docker、Docker-compose、Nginx、Linux、Jenkins、CI-CD...</p>
      </h1>
    </div>
    <div class="image"></div>
    <div class="heading">
    </div>
    <div class="text">
      <h1>
        <p>Frontend Skills</p>
        <p>Html、Javascript、CSS、JQuery...</p>
        <p>Vue(2/3)、Typescript、Vuex、Pinia、VueRouter...</p>
      </h1>
    </div>
  </div>
</template>

<style scoped lang="scss">
.shell {
  overflow-x: hidden;
  perspective: 3px;
  height: 90vh;

  & div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    letter-spacing: 2px;
  }

  //定义背景图数组
  $bg1: "/img/home/1.jpg";
  $bg2: "/img/home/2.jpg";
  $bg3: "/img/home/3.jpg";
  $bg4: "/img/home/4.jpg";
  $bgs: $bg1, $bg2, $bg3, $bg4;

  @for $i from 1 through 4 {
    $item: nth($bgs, $i);
    $index: $i + 2 * ($i - 1);

    & div:nth-child(#{$index}) {
      background-image: url($item);
    }
  }

  .image {
    transform: translateZ(-1px) scale(1.6);
    background-size: cover;
    height: 100vh;
    z-index: -1;
  }

  .heading {
    z-index: -1;
    transform: translateY(-30vh) translateZ(1px);
    color: #fff;
    font-size: 30px;
  }

  .text {
    height: 50vh;
    background-color: #2b0606;
    text-align: center;
    line-height: 80px;

    h1 {
      color: aqua;
    }
  }
}
</style>
